<template>
  <div>
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="demo-form-inline mb-4">
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" class="!w-240px" />
        </el-form-item>
        <el-form-item label="业务类型" prop="bizType">
          <el-select v-model="queryParams.bizType" class="!w-240px">
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.USER_PENDING_BIZ_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="来源门店" prop="storeName">
          <el-input v-model="queryParams.storeName" placeholder="请输入门店名称" class="!w-240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <el-table :data="tableData" :loading="loading" stripe :show-overflow-tooltip="true">
        <el-table-column label="手机号码" prop="mobile" align="center" />
        <el-table-column label="来源" prop="storeName" align="center" />
        <el-table-column label="记录" prop="bizType" align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.USER_PENDING_BIZ_TYPE" :value="scope.row.bizType" />
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore/index'
import { formatDate } from '@/utils/formatTime'
import { getUserPage } from '@/api/member/user'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'

const userOptions = ref([] as any)
const queryFormRef = ref()

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  mobile: undefined,
  createTime: undefined,
  bizType: undefined,
  storeName:undefined,
})
const state = reactive({
  tableData: [],
  total: 0,

  posterTypeList: [] as any[]
})
const { tableData, total, posterTypeList } = toRefs(state)
const loading = ref(false)
const handleSearch = () => {
  queryParams.pageNo = 1
  getList()
}
const handleReset = () => {
  queryFormRef.value.resetFields()
  handleSearch()
}
const getList = async () => {
  const res = await DeliveryPickUpStoreApi.storeMemberUserPendingBiz(queryParams)
  state.tableData = res.list || []
  state.total = res.total || 0
}
const remoteMethod = async (query) => {
  if (query) {
    loading.value = true
    const data = await getUserPage({ pageNo: 1, pageSize: 10, mobile: query })
    userOptions.value = data.list
    loading.value = false
  } else {
    userOptions.value = []
  }
}
onMounted(async () => {
  getList()
})
</script>
